<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vault MySQL高并发服务</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 0;
        }
        .feature-card {
            transition: transform 0.3s ease;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        .status-badge {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
        }
        .metric-card {
            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
            border-left: 4px solid #007bff;
        }
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        .footer {
            background-color: #343a40;
            color: white;
            padding: 2rem 0;
            margin-top: 4rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-shield-lock"></i>
                Vault MySQL服务
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#databases">数据库管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#testing">性能测试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#monitoring">监控</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 mb-4">
                <i class="bi bi-database"></i>
                Vault MySQL高并发服务
            </h1>
            <p class="lead mb-4">
                基于HashiCorp Vault的MySQL数据库凭证管理和高并发测试系统
            </p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="d-flex justify-content-center gap-3 flex-wrap">
                        <span class="badge bg-light text-dark status-badge">
                            <i class="bi bi-check-circle"></i>
                            安全凭证管理
                        </span>
                        <span class="badge bg-light text-dark status-badge">
                            <i class="bi bi-speedometer2"></i>
                            高并发测试
                        </span>
                        <span class="badge bg-light text-dark status-badge">
                            <i class="bi bi-graph-up"></i>
                            实时监控
                        </span>
                        <span class="badge bg-light text-dark status-badge">
                            <i class="bi bi-cloud"></i>
                            云原生架构
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 系统状态概览 -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">
                <i class="bi bi-activity"></i>
                系统状态概览
            </h2>
            <div class="row g-4">
                <div class="col-md-3">
                    <div class="card metric-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-database-check display-4 text-primary mb-3"></i>
                            <h5 class="card-title">数据库配置</h5>
                            <h3 class="text-primary" th:text="${dbStats != null ? dbStats.totalCount : 0}">0</h3>
                            <p class="text-muted mb-0">
                                启用: <span th:text="${dbStats != null ? dbStats.enabledCount : 0}">0</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card metric-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-shield-check display-4 text-success mb-3"></i>
                            <h5 class="card-title">Vault状态</h5>
                            <h3 class="text-success" th:text="${initStatus != null && initStatus.vaultConfigCount > 0 ? '已配置' : '未配置'}">未配置</h3>
                            <p class="text-muted mb-0">
                                配置数: <span th:text="${initStatus != null ? initStatus.vaultConfigCount : 0}">0</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card metric-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-speedometer display-4 text-warning mb-3"></i>
                            <h5 class="card-title">测试状态</h5>
                            <h3 class="text-warning" id="runningTests">0</h3>
                            <p class="text-muted mb-0">正在运行的测试</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card metric-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-clock display-4 text-info mb-3"></i>
                            <h5 class="card-title">系统运行时间</h5>
                            <h3 class="text-info" id="uptime">--</h3>
                            <p class="text-muted mb-0" th:text="${currentTime}">当前时间</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能模块 -->
    <section class="py-5 bg-light" id="features">
        <div class="container">
            <h2 class="text-center mb-5">
                <i class="bi bi-grid-3x3-gap"></i>
                核心功能
            </h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card feature-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-database-gear display-4 text-primary mb-3"></i>
                            <h5 class="card-title">数据库管理</h5>
                            <p class="card-text">管理50个MySQL数据库配置，支持动态连接池和实时状态监控。</p>
                            <button class="btn btn-primary" onclick="showDatabaseManagement()">
                                <i class="bi bi-arrow-right"></i>
                                进入管理
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card feature-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-shield-lock display-4 text-success mb-3"></i>
                            <h5 class="card-title">Vault集成</h5>
                            <p class="card-text">安全的数据库凭证管理，支持动态凭证和自动轮换。</p>
                            <button class="btn btn-success" onclick="showVaultManagement()">
                                <i class="bi bi-arrow-right"></i>
                                查看状态
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card feature-card h-100">
                        <div class="card-body text-center">
                            <i class="bi bi-lightning display-4 text-warning mb-3"></i>
                            <h5 class="card-title">高并发测试</h5>
                            <p class="card-text">支持多数据库并发测试，实时性能监控和详细报告。</p>
                            <button class="btn btn-warning" onclick="showPerformanceTesting()">
                                <i class="bi bi-arrow-right"></i>
                                开始测试
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 快速操作 -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">
                <i class="bi bi-lightning-charge"></i>
                快速操作
            </h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <button class="btn btn-outline-primary w-100" onclick="testVaultConnection()">
                                        <i class="bi bi-shield-check"></i>
                                        测试Vault连接
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-outline-success w-100" onclick="testDatabaseConnections()">
                                        <i class="bi bi-database-check"></i>
                                        测试数据库连接
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-outline-warning w-100" onclick="startQuickTest()">
                                        <i class="bi bi-speedometer2"></i>
                                        快速性能测试
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button class="btn btn-outline-info w-100" onclick="viewSystemStatus()">
                                        <i class="bi bi-activity"></i>
                                        查看系统状态
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>
                        <i class="bi bi-shield-lock"></i>
                        Vault MySQL高并发服务
                    </h5>
                    <p class="mb-0">基于Spring Boot和HashiCorp Vault的企业级数据库管理解决方案</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">
                        版本 1.0.0 | 
                        <a href="/api/system/info" class="text-light">API文档</a> | 
                        <a href="/about" class="text-light">关于我们</a>
                    </p>
                    <p class="mb-0">
                        <small>&copy; 2024 Vault MySQL Service. All rights reserved.</small>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 模态框 -->
    <div class="modal fade" id="resultModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resultModalTitle">操作结果</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="resultModalBody">
                    <!-- 动态内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateSystemStatus();
            setInterval(updateSystemStatus, 30000); // 每30秒更新一次
        });

        // 更新系统状态
        function updateSystemStatus() {
            fetch('/api/system/status')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'running') {
                        // 更新运行中的测试数量
                        document.getElementById('runningTests').textContent = '0'; // 暂时设为0
                        
                        // 更新运行时间
                        const uptime = new Date(data.timestamp).toLocaleString();
                        document.getElementById('uptime').textContent = '运行中';
                    }
                })
                .catch(error => {
                    console.error('获取系统状态失败:', error);
                });
        }

        // 显示结果模态框
        function showResult(title, content, isSuccess = true) {
            document.getElementById('resultModalTitle').textContent = title;
            document.getElementById('resultModalBody').innerHTML = content;
            
            const modal = new bootstrap.Modal(document.getElementById('resultModal'));
            modal.show();
        }

        // 测试Vault连接
        function testVaultConnection() {
            fetch('/api/vault/test-connection')
                .then(response => response.json())
                .then(data => {
                    const content = `
                        <div class="alert alert-${data.success ? 'success' : 'danger'}">
                            <i class="bi bi-${data.success ? 'check-circle' : 'x-circle'}"></i>
                            ${data.message}
                        </div>
                        <p><strong>延迟:</strong> ${data.latencyMs}ms</p>
                        <p><strong>时间:</strong> ${new Date(data.timestamp).toLocaleString()}</p>
                    `;
                    showResult('Vault连接测试', content, data.success);
                })
                .catch(error => {
                    showResult('Vault连接测试', `<div class="alert alert-danger">测试失败: ${error.message}</div>`, false);
                });
        }

        // 测试数据库连接
        function testDatabaseConnections() {
            showResult('数据库连接测试', '<div class="text-center"><div class="spinner-border" role="status"></div><p>正在测试数据库连接...</p></div>');
            
            // 这里可以添加实际的数据库连接测试逻辑
            setTimeout(() => {
                const content = `
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        数据库连接测试功能正在开发中...
                    </div>
                    <p>请使用API接口进行详细的数据库连接测试。</p>
                `;
                showResult('数据库连接测试', content);
            }, 2000);
        }

        // 开始快速测试
        function startQuickTest() {
            showResult('快速性能测试', '<div class="text-center"><div class="spinner-border" role="status"></div><p>正在启动性能测试...</p></div>');
            
            // 这里可以添加实际的性能测试逻辑
            setTimeout(() => {
                const content = `
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        性能测试功能正在开发中...
                    </div>
                    <p>请使用测试管理界面进行详细的性能测试配置。</p>
                `;
                showResult('快速性能测试', content);
            }, 2000);
        }

        // 查看系统状态
        function viewSystemStatus() {
            fetch('/api/system/info')
                .then(response => response.json())
                .then(data => {
                    const content = `
                        <div class="row">
                            <div class="col-md-6">
                                <h6>应用信息</h6>
                                <p><strong>名称:</strong> ${data.application.name}</p>
                                <p><strong>版本:</strong> ${data.application.version}</p>
                            </div>
                            <div class="col-md-6">
                                <h6>系统信息</h6>
                                <p><strong>Java版本:</strong> ${data.system.javaVersion}</p>
                                <p><strong>操作系统:</strong> ${data.system.osName}</p>
                            </div>
                        </div>
                        <div class="mt-3">
                            <h6>内存使用</h6>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: ${data.memory.usagePercentage}%">
                                    ${data.memory.usagePercentage}%
                                </div>
                            </div>
                            <small class="text-muted">已用: ${data.memory.usedMemory} / 总计: ${data.memory.totalMemory}</small>
                        </div>
                    `;
                    showResult('系统状态', content);
                })
                .catch(error => {
                    showResult('系统状态', `<div class="alert alert-danger">获取系统状态失败: ${error.message}</div>`, false);
                });
        }

        // 功能模块导航
        function showDatabaseManagement() {
            alert('数据库管理功能正在开发中...');
        }

        function showVaultManagement() {
            alert('Vault管理功能正在开发中...');
        }

        function showPerformanceTesting() {
            alert('性能测试功能正在开发中...');
        }
    </script>
</body>
</html>